<template>
  <div class="d-paner d-paner-noborder">
    <div class="d-paner-body">
      <table class="d-table d-table-striped d-table-bordered">
        <colgroup>
          <col width="50">
          <col width="100">
          <col width="140">
        </colgroup>
        <thead>
          <tr>
            <th>序号</th>
            <th>Key</th>
            <th>Value(ms)</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in state.list" :key="item.key">
            <td>{{ i + 1 }}</td>
            <td>{{ item.key }}</td>
            <td>{{ item.value }}</td>
            <td>{{ item.desc }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="d-paner-footer">
      <div class="d-paner-actions">
        <button @click="handleAnalyse" class="d-btn d-btn-primary d-actions-item" type="button">查看分析</button>
      </div>
    </div>
  </div>
</template>

<script>
import performanceMonitor from '@daelui/dogjs/dist/libs/performance-monitor.js'

export default {
  components: {

  },

  props: {

  },

  data () {
    return {
      state: {
        list: []
      }
    }
  },

  watch: {

  },

  methods: {
    /**
     * @function 统计
    */
    handleAnalyse () {
      let data = performanceMonitor.getPerformData()
      this.state.list = data.desc
    }
  },

  beforeMount () {

  },

  mounted () {

  }
}
</script>

<style lang="less" scoped>
th,td {
  word-break: break-all;
}
</style>
